<template>
  <div style="margin-bottom:60px">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-card>
        <el-form-item label="模板名称" prop="templateName">
          <el-input
            v-model="formData.templateName"
            placeholder="请输入模板名称"
            clearable
            :style="{width: '40%'}"
          ></el-input>
        </el-form-item>

        <el-form-item label="模板描述" prop="templateDescription">
          <el-input
            v-model="formData.templateDescription"
            placeholder="请输入模板描述"
            clearable
            :style="{width: '40%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="模板图标" prop="image">
          <ImageUploadSmall
            :limit="1"
            @input="imageUpload"
            v-model="formData.image"
            :isShowTip="false"
          ></ImageUploadSmall>
        </el-form-item>
      </el-card>
      <draggable @end="dragEndChange" animation="{340}" :list="formData.reportTemplateQuestionList">
        <div v-for="(item,index) in formData.reportTemplateQuestionList" :key="index">
          <el-card class="mt10">
            <div class="df">
              <div class="mt10 fwBlod mr5" style="position: relative;">
                0{{index + 1}}
                <div v-show="item.isMust == 0" class="isMustBox">*</div>
              </div>
              <div style="width:100%">
                <el-form-item
                  label-width="0"
                  :prop="'reportTemplateQuestionList.' + index + '.questionName'"
                  :rules="rules.templateName"
                >
                  <el-input
                    size="small"
                    v-model="item.questionName"
                    placeholder="请输入问题"
                    clearable
                    :style="{width: '43%',border:none}"
                  ></el-input>
                </el-form-item>
                <el-form-item label-width="0">
                  <el-input
                    size="mini"
                    v-model="item.questionDescription"
                    placeholder="请输入描述"
                    clearable
                    :style="{width: '100%'}"
                  ></el-input>
                </el-form-item>
                <FormType :questionItem="item"></FormType>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="df aic jcsb">
              <el-checkbox :true-label="'0'" :false-label="'1'" v-model="item.isMust">必填</el-checkbox>
              <el-button @click="delQuestion(index)" type="danger" icon="el-icon-delete" circle></el-button>
            </div>
          </el-card>
        </div>
      </draggable>

      <div class="df jcc mt10">
        <el-button
          @click="typeFlag = true"
          style="font-size:22px"
          type="text"
          size="medium"
          icon="el-icon-plus"
        >插入问题</el-button>
      </div>
    </el-form>
    <QuestionTypeTm :typeFlag="typeFlag" @addQuestionFn="addQuestionFn" @close="typeClose"></QuestionTypeTm>
    <div class="btnBox">
      <el-button
        @click="submitForm"
        :disabled="formData.reportTemplateQuestionList.length == 0"
        style="width:300px"
        type="primary"
      >下一步</el-button>
    </div>
  </div>
</template>
  <script>
import draggable from "vuedraggable";
import FormType from "./formType.vue";
import ImageUploadSmall from "@/components/ImageUploadSmall";
import QuestionTypeTm from "./questionTypeTm.vue";
export default {
  components: { draggable, FormType, QuestionTypeTm, ImageUploadSmall },
  props: {
    formData: {}
  },
  data() {
    return {
      typeFlag: false,
      rules: {
        templateName: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],

        templateDescription: [
          {
            required: true,
            message: "请选择下拉选择",
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // console.log(this.formData);
        this.$emit("nextChange", this.formData);
        // TODO 提交表单
      });
    },
    imageUpload(e) {
      this.formData.image = e;
    },
    addQuestionFn(e) {
      this.typeFlag = false;
      this.formData.reportTemplateQuestionList.push({
        questionName: "",
        questionDescription: "",
        questionType: e.value,
        questionExtend: "",
        questionExtendArr: [{ value: "选项1" },{ value: "选项2" }],
        sort: this.formData.reportTemplateQuestionList.length,
        isMust: "1"
      });
    },
    delQuestion(index) {
      this.formData.reportTemplateQuestionList.splice(index, 1);
    },
    typeClose() {
      this.typeFlag = false;
    },
    dragEndChange() {
      console.log(this.formData.reportTemplateQuestionList);
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    field109BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    }
  }
};
</script>
  <style scoped>
.el-form-item {
  margin-bottom: 10px;
}
.fwBlod {
  font-weight: bold;
}
.btnBox {
  position: fixed;
  bottom: 20px;
  left: 50%;
}
.isMustBox {
  color: red;
  position: absolute;
  top: -2px;
  left: -8px;
}
</style>
  